import FilterContainer from './filterContainer.vue'
import CreateContainer from './createContainer.vue'
import {defineComponent,PropType} from 'vue'

interface DataTypes{
  currentPage:number,
  showViewImg:boolean,
  viewImgUrl:string,
  form:object,
  form_add:object,
  form_update:any,
  showAdd:boolean,
  showUpdate:boolean,
  search:boolean
}

interface ColumnItem{
  name:string,
  prop:string,
  type:"text" | 'select' |'img'|'table_slot',
  lableWidth:number,
  search:boolean,
  disable?:boolean,
  slotName?:String,
  options?:Array<any>,
  optionKey?:string,
  optionValue?:string,
  formSpan?:any,
  add?:boolean,
  width?:number
}
export default defineComponent({
  name:"myTable",
  props:{
    tableData:{
      type:Array,
      default:[],
    },
    columnArr:{
      type:Array as PropType<Array<ColumnItem>>,
      default:()=>[]
    },
    option:{
      type:Array as PropType<Array<any>>,
      default:()=>[]
    },
    checkBox:{
      type:Boolean,
      default:false
    },
    total:{
      type:Number,
      default:0
    },
    imgHeight:{
      type:Number,
      default:50
    },
    add:{
      type:Boolean,
      default:true
    },
    remove:{
      type:Boolean,
      default:true
    },
    edit:{
      type:Boolean,
      default:true
    },
    size:{
      type:Number,
      default:10,
    },
    token:{
      type:String,
      default:"",
    }
  },
  components:{
    'FilterContainer':FilterContainer,
    "CreateContainer":CreateContainer
  },
  data():DataTypes{
    return{
      currentPage:1,
      showViewImg:false,
      viewImgUrl:"",
      form:{},//查询表单
      form_add:{},//新增表单
      form_update:{},//编辑表单
      showAdd:false,//显示新增弹窗
      showUpdate:false,//显示编辑弹窗
      search:false,
    }
  },
  created() {
    this.columnArr.forEach((item:any)=>{
      if(item.search){
        this.search = true;
      }
    })
  },
  methods:{
    // 点击选项
    clickOption(row:any,methods:any){
      this.$emit(methods,row);  
    },
    // 修改分页size
    handleSizeChange(size:number){
      this.$emit("getList",this.currentPage,size)
    },
    // 修改分页page
    handleCurrentChange(page:number,size:number){
      this.currentPage = page;
      this.$emit("getList",page,this.size)
    },
    // 图片预览
    viewImg(url:string){
      this.showViewImg = true;
      this.viewImgUrl = url;
      
    },
    /**
     * 查询
     */
    filter(){
      try {
        this.$emit("search",this.form)
      } catch (error) {
        console.error("search 方法不存在，请检查");
      }
      
    },
    /**
     * 新增
     */
    addSubmit(form_add:object){
      try {
        this.$emit("add",form_add,this.closeAdd)
      } catch (error) {
        console.error("add 方法不存在，请检查");
      }
      
    },
    /** 
     * 删除
    */
    removeItem(row:number){
      this.$emit('delete',row);  
    },
    /**
     * 打开编辑弹窗
     */
    updataItem(row:Array<any>){
      this.form_update = {...row}
      this.showUpdate  = true
    },
    /**
     * 提交编辑
     */
    updataSubmit(){
      this.$emit("update",this.form_update,this.closeUpdate)
    },
    /**
     * 格式化枚举类型数据
     * @param {*} list //枚举
     * @param {*} value //值
     * @param {*} optionKey,//对应key
     * @param {*} optionValue，对应value
     */
    formatSelect(list:Array<Object>|undefined,value:any,optionKey:any,optionValue:any):any{
      if(!list){
        return;
      }
      if(!value && value !== 0){
        return ""
      }
      if(list.length == 0){
        return ''
      }
      let filterArr:Array<any> = list.filter((item:any)=>{
        return item[optionKey] == value
      })
      return filterArr[0][optionValue]
    },
    /**
     * 新增弹窗
     */
    addFrom(){
      this.showAdd = true;
    },
    /**
     * 关闭新增弹窗
     */
    closeAdd(){
      this.showAdd = false;
      //清空表单
      this.form_add= {};
    },
    /**
     * 点击单选框
     */
    select(selection:any,row:any){
      this.$emit("select",selection,row)
    },
    //点击全选
    select_all(selection:any){
      this.$emit("select_all",selection)
    },
    //上传图片成功
    uploadImgSuccess(res:any,file:any){
      console.log(res,file);
    },
    /**
     * 关闭修改弹窗
     */
    closeUpdate(){
      this.showUpdate = false
    }
  }
})